<template>
  <div class="container"> 
    <div class="process">
      <img src="http://file.rzkeji.com/web/loveciy/img/cutPrice/process1.png" class="processBackground"/>
      <img src="http://file.rzkeji.com/web/loveciy/img/footer11.png" class="processBack"/>
      <span class="processShow" :style="{'width':showWidth}"></span>
      <span class="processNumber">{{processData !=undefined ?processData.winning_odds :''}}/{{processData !=undefined ?processData.winning :''}}</span>
      <div class="processTip">
        <div class="tipWrap" :style="{'left':tipLeft}">
          <img src="http://file.rzkeji.com/web/loveciy/img/cutPrice/smallTip.png"/>
          <span v-if="processData != undefined && processData.type == 'draw'">已提高{{processData !=undefined ?processData.winning_money:''}}</span>
          <span v-if="processData != undefined && processData.type == 'cut'">已砍{{processData !=undefined ?processData.winning_money:''}}</span>
        </div>sss
      </div>
    </div> 
  </div>
</template>

<script>
export default {
  props:['processData'],
  data () {
    return {
      
    }
  },
  computed:{
    tipLeft(){
      var _this=this;
      if(_this.showWidth!=undefined){
        return _this.showWidth.substring(0,_this.showWidth.indexOf('px'))-44+"px"
      }
    },
    showWidth(){
      var _this=this;
      if(_this.processData!=undefined){
        var proportion=parseInt(_this.processData.winning)/parseInt(_this.processData.winning_odds);
        if(_this.processData.winning_odds<7){
          return '35px'
        }else{
          return 334/proportion+"px"
        } 
      }
    },
  },
}
</script>

<style scoped>
.process{width: 344px;height: 83px;margin-left: 15.5px;position: relative;}
.processBackground{width: 344px;height: 41px;position: absolute;left: 300;bottom: 0;}
.processBack{width: 183px;left: 80px;position: absolute;bottom: 0;height: 41px;z-index: 99}
.processNumber{width: 337px;height: 41px;line-height: 41px;direction: rtl;position: absolute;left:0;bottom: 0;font-size: 14px;color: #999;padding-right: 7px}
.processShow{height:35px;background: #cc0033;border-radius: 15px;position: absolute;left
:4px;bottom: 4px;}
.processTip{position: absolute;left: 0;top: 0;}
.tipWrap{position: relative;width: 100%;}
.tipWrap img{width: 97.5px;left: 0;position: absolute;top: 0;height: 37.5px;}
.tipWrap  span{width: 91.5px;height: 27.5px;position: absolute;left: 3px;top:0;font-size: 13px;color:#fff;line-height: 27.5px;display: block;text-align: center;}
</style>
